<template>
	<view class="pageBox" :style="{paddingTop:statusBarHeight + 'px'}">

		<view class="topHead flex-between" :style="{paddingTop:statusBarHeight + 21 + 'px'}">
			<image class="detailsBack" src="http://www.bobei.shop/static/third/detailsBack.png" @click="goBack"></image>
			</image>
		</view>
		<view class="swiperBox2">
			<swiper class="swiper2" circular :autoplay="false" :interval="3000" :indicator-dots="false"
				:current="swiperCurrent" @change="swiper2Change">
				<swiper-item v-for="(item,index) in info.thumb" :key="index">
					<image class="swiper2Img" :src="item">
					</image>
				</swiper-item>
			</swiper>
			<scroll-view class="dotsBoxScroll" :scroll-x="true">
				<view class="dotsBox flex-center">
					<image class="dotsImg" :src="item" mode="" v-for="(item,index) in info.thumb" :key="index"
						@click="onDotsImg(index)"></image>
				</view>
			</scroll-view>
		</view>

		<view class="priceBox">
			<image class="priceBoxBg" src="http://www.bobei.shop/static/third/priceBoxBg.png"></image>
			<view class="price flex">
				<view class="priceLeft flex-row">
					<view class="priceLeft-L flex">
						<view class="priceLeft-L-T">
							促销价
						</view>
						<view class="priceLeft-L-T2">
							¥{{ price }}
						</view>
					</view>
					<view class="priceLeft-R flex">
						<view class="priceLeft-R-sign" v-if="nowStatus == 0">
							未开始
						</view>
						<view class="priceLeft-R-sign" v-if="nowStatus == 1">
							秒杀中
						</view>
						<view class="priceLeft-R-sign" v-if="nowStatus == 2">
							已结束
						</view>
						<view class="priceLeft-p-price2 flex-center">
							¥{{productprice}}
							<view class="priceLeft-p-line"></view>
						</view>
					</view>
		
				</view>
				<view class="priceRight flex">
					<view class="priceRight-title" v-if="nowStatus == 0">
						距离秒杀开始
					</view>
					<view class="priceRight-title" v-if="nowStatus == 1">
						距离秒杀结束
					</view>
					<view class="priceRight-title" v-if="nowStatus == 2">
						已结束
					</view>
					<uni-countdown :showDay="false" :hour="hour" :minute="minute" :second="second"></uni-countdown>
				</view>
			</view>
		</view>

		<view class="infoBox" v-if="info.goods">
			<view class="infoTitle">
				{{info.goods.title}}
			</view>

			<scroll-view class="signScroll" :scroll-x="true">
				<view class="sign flex">
					<!-- <view class="signItem flex-center signItemOrigin">
						限时秒杀
					</view>
					<view class="signItem flex-center signItemBlue">
						新品
					</view>
					<view class="signItem flex-center signItemWhite">
						赠送贡献值：1
					</view>
					<view class="signItem flex-center signItemWhite">
						<image class="bean" src="http://www.bobei.shop/static/third/bean.png"></image>
						可使用易付豆：1
					</view> -->
					<view class="signItem flex-center signItemOrigin" v-if="info.isdiscount == 1">
						特卖
					</view>
					<view class="signItem flex-center signItemBlue" v-if="info.isnew == 1">
						新品
					</view>
					<view class="signItem flex-center signItemOrigin" v-if="info.isrecommand == 1">
						可选
					</view>
					<view class="signItem flex-center signItemBlue" v-if="info.ishot == 1">
						热卖
					</view>


					<view class="signItem flex-center signItemWhite" v-if="isLogin">
						<image class="bean" src="http://www.bobei.shop/static/third/bean.png"></image>
						{{info.goods ? info.goods.scoreTxt1 : ""}}
					</view>

					<view class="signItem flex-center signItemWhite" v-if="info.genre == 0 && isLogin">
						<image class="bean" src="http://www.bobei.shop/static/third/bean.png"></image>
						{{info.goods ? info.goods.scoreTxt : ""}}
					</view>
				</view>
			</scroll-view>

			<view class="infoBom flex-between">
				<view class="infoBomItem flex-row">
					<view class="infoBomItemText">
						快递：{{ info.goods.freight }}
					</view>
				</view>
				<view class="infoBomItem flex-row">
					<view class="infoBomItemText">
						销量:{{ info.goods.sales }}笔
					</view>
				</view>

				<view class="infoBomItem flex-row">
					<view class="infoBomItemText">
						库存:{{ info.goods.total }}件
					</view>
				</view>
			</view>

			<view class="infoTips flex">
				<image class="infoTipsImg" src="http://www.bobei.shop/static/third/infoTipsImg.png"></image>
				<view class="infoTipsText">
					七天内无理由
				</view>
			</view>
		</view>

		<view class="line"></view>

		<view class="choose flex-row">
			<view class="chooseLine"></view>
			<view class="chooseText">
				可选商品
			</view>
		</view>

		<view class="goodsSwiperBox">
			<swiper class="goodsSwiper" circular :indicator-dots="true" :autoplay="false" :interval="5000" :duration="500"
				indicator-color="#D8D7D9" indicator-active-color="#F3655E">
				<swiper-item v-for="(item,index) in optional" :key="index">
					<view class="swiper-item">
						<view class="chooseItem flex-row" v-for="(item2,index2) in item" :key="item2.id"
							@click.stop="goGoodsDetails(item2)">
							<image class="chooseThumb" :src="item2.thumbUrl"></image>
							<view class="chooseInfo">
								<view class="chooseInfoTitle oneHidden">
									{{ item2.title }}
								</view>
								<scroll-view :scroll-x="true" class="chooseSignBox">
									<view class="chooseSign flex">
										<view class="chooseSignItem" v-for="(item3,index3) in item2.labelname" :key="index3">
											{{ item3.label }}
										</view>
									</view>
								</scroll-view>

								<view class="choosePrice flex-row">
									<view class="priceLeft">
										¥{{ item2.marketprice }}
									</view>
									<view class="priceRight">
										¥{{ item2.productprice }}
										<view class="priceRightLine"></view>
									</view>
								</view>

							</view>
							<view class="count flex-center" v-if="item2.isSpike == 1 && item2.isdiscount != 1">
								<view class="countText">
									秒杀
								</view>
								<uni-countdown :showDay="false" :hour="item2.time_h" :minute="item2.time_m"
									:second="item2.time_s"></uni-countdown>
							</view>
							<button :plain="true" class="spikerBuy" v-if="item2.isSpike != 1">购买</button>
						</view>
					</view>
				</swiper-item>

			</swiper>
		</view>

		<view class="evaluateBox">
			<view class="evaluate">
				<view class="evaluateTop flex-between" @click="goEvaluate">
					<view class="evaluateTopLeft flex-row">
						<view class="evaluateTopLeftLine"></view>
						<view class="evaluateTopLeftText">
							商品评价({{ evalTotal }})
						</view>
					</view>
					<view class="evaluateTopRight flex-row">
						<view class="evaluateTopRightText">
							查看全部
						</view>
						<uni-icons type="right" size="15" color="#333"></uni-icons>
					</view>
				</view>

				<view class="evaluateList">
					<view class="evaluateListItem" v-for="item in eval" :key="item.id">
						<view class="itemTop flex-row" v-if="item.user">
							<image class="avatar" :src="item.user.avatar"></image>
							<view class="nicknameBox">
								<view class="nickname">
									{{ item.user.nickname }}
								</view>
								<view class="time">
									{{ item.user.createdAt }}
								</view>
							</view>
						</view>

						<view class="itemBom">
							<view class="itemBomText">
								{{ item.content }}
							</view>
							<view class="itemBomImgBox flex-row">
								<image class="itemBomImg" :src="item2" v-for="(item2,index2) in item.images" :key="index2"
									@click.stop="onImg(item2)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="detailsTitle flex-center">
			<view class="detailsTitleLine"></view>
			<view class="detailsTitleText flex-row">
				<image class="heartIcon" src="http://www.bobei.shop/static/third/heartIcon.png"></image>
				<view class="detailsTitleText2">
					商品详情
				</view>
			</view>
			<view class="detailsTitleLine2"></view>
		</view>

		<view class="details" v-html="info.content">

		</view>

		<view class="bom flex-between">
			<view class="bomLBox flex">
				<!-- @click="toCart" -->
				<view class="bomL flex-center">
					<image class="cart" src="http://www.bobei.shop/static/tabbar/cart.png"></image>
					<view class="cartT">
						购物车
					</view>
					<view class="cartNum">
						{{total}}
					</view>
				</view>

				<view class="bomL flex-center">
					<!-- @click="shouCnag" -->
					<image class="cart" src="http://www.bobei.shop/static/home/shouCang.png" v-if="info.collection == 0"></image>
					<!--  @click="yiShouCnag" -->
					<image class="cart" src="http://www.bobei.shop/static/home/yiShouCang.png" v-if="info.collection == 1">
					</image>
					<view class="cartT">
						收藏
					</view>
				</view>
			</view>
			<view class="bomR flex-row">
				<button class="add" :plain="true" @click="open">加入购物车</button>
				<button class="buy" :plain="true" @click="open">立即购买</button>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom">
			<view class="popupBox">
				<view class="popupInfoBox flex-row">
					<image class="thumb" :src="thumb"></image>
					<view class="infoR">
						<view class="title">
							{{info.title}}
						</view>

						<view class="infoRB flex-between">
							<view class="price">
								¥{{price}}
							</view>
							<my-stepper :amountObj="amountObj" @stepperChange="stepperChange" @stepperRes="stepperRes">
							</my-stepper>
						</view>


					</view>
				</view>
				<view class="popupSkuTitle" v-if="info.goods && info.goods.hasoption == 1">
					产品规格
				</view>
				<div class="skuBox" v-if="info.goods && info.goods.hasoption == 1">
					<div class="sku" v-for="item in skuList" :key="item.id">
						<div class="skuTitle">{{ item.title }}</div>
						<div class="skuCon flex-between">
							<button :plain="true" :class="[item2.status ? 'skuActive' : 'skuItem']" v-for="item2 in item.itemList"
								:key="item2.id" @click="onSkuItem(item, item2)">
								{{ item2.title }}
							</button>
						</div>
					</div>
				</div>

				<view class="bom flex-between">
					<view class="bomLBox flex">
						<!-- @click="toCart" -->
						<view class="bomL flex-center">
							<image class="cart" src="http://www.bobei.shop/static/tabbar/cart.png"></image>
							<view class="cartT">
								购物车
							</view>
							<view class="cartNum">
								{{total}}
							</view>
						</view>

						<view class="bomL flex-center">
							<!-- @click="shouCnag" -->
							<image class="cart" src="http://www.bobei.shop/static/home/shouCang.png" v-if="info.collection == 0">
							</image>
							<!-- @click="yiShouCnag" -->
							<image class="cart" src="http://www.bobei.shop/static/home/yiShouCang.png" v-if="info.collection == 1">
							</image>
							<view class="cartT">
								收藏
							</view>
						</view>
					</view>

					<view class="bomR flex-row">
						<button class="add" :plain="true" @click="onSkuStatus(1)">加入购物车</button>
						<button class="buy" :plain="true" @click="onSkuStatus(2)">立即购买</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import myStepper from "../components/my-stepper/my-stepper.vue";
	import myPopupTips from "../components/my-popup-tips/my-popup-tips.vue";
	import uniCountdown from "../uni_modules/uni-countdown/components/uni-countdown/uni-countdown.vue";
	export default {
		components: {
			"my-stepper": myStepper,
			"my-popup-tips": myPopupTips,
			"uni-countdown": uniCountdown,
		},
		data() {
			return {
				swiperCurrent: 0,
				statusBarHeight: "",
				optional: [],

				hour: 0,
				minute: 0,
				second: 0,

				amountObj: 1,
				skuList: [
					// {
					// 	id: 1,
					// 	title: "尺码",
					// 	status: false,
					// 	itemList: [{
					// 			id: 11,
					// 			title: "S",
					// 			status: false,
					// 		},
					// 	],
					// },
				],
				sku: [], // 选中的规格id
				sku_id: "", // 选择的规格id拼接
				skuId: "", // 选中的规格id拼接后对应的id
				skuText: "请选择规格", // 选中的规格id拼接后对应的id对应的的拼接规格
				thumb: "", // 缩略图
				price: 0, // 价格
				productprice: 0,
				isChecked: false,
				id: 0,
				info: {},
				total: 0,
				user: {},
				eval: [], // 评价
				evalTotal: 0,
				hasoption: "", //0是无规格 

				seckill: "", // seckill==seckill为秒杀

				startTime: "", // 秒杀开始时间
				start_timestamp: "",
				endTime: "", // 秒杀结束时间
				end_timestamp: "",
				now_timestamp: "", // 当前时间时间戳
				nowStatus: 0, // 0未开始 1进行中 2已结束 只有进行中才能购买
				inter: null,

				goods_id: "",
				inviteCode: "",
				isLogin: false,
			}
		},
		onLoad(e) {
			this.statusBarHeight = this.$mySysInfo().top;
			this.id = e.id;
			this.seckill = e.seckill;
			if (e.inviteCode) {
				uni.setStorageSync('inviteCode', e.inviteCode);
				this.inviteCode = e.inviteCode;
			}
			this.goods_id = e.goods_id ? e.goods_id : "";
			if (e.inviteCode && e.goods_id) {
				this.clickShare();
			}

			this.getOptional();
			if (uni.getStorageSync('token')) {
				this.isLogin = true;
				this.getCartList();
				this.getUser();
			}
		},
		onShow() {
			this.getInfo();
		},
		onHide() {
			clearInterval(this.inter);
		},
		onUnload() {
			clearInterval(this.inter);
		},
		methods: {
			clickShare() {
				this.$post({
					url: "/portal/Shop",
					module: "Goods",
					interface: 8001,
					data: {
						goods_id: this.goods_id,
						invite_code: this.inviteCode,
					},
				}).then((res) => {
					// console.log(res);
				})
			},
			swiper2Change(e) {
				this.swiperCurrent = e.detail.current;
			},
			onDotsImg(index) {
				this.swiperCurrent = index;
			},
			goGoodsDetails(param) {
				if (param.isSpike == 1 && param.ishot != 1) {
					this.goGoodsDetails2(param, "seckill");
				} else {
					uni.navigateTo({
						url: "/home/goodsDetails?id=" + param.id,
					})
				}

			},
			goGoodsDetails2(param, seckill) {
				uni.navigateTo({
					url: `/home/spikeDetails?id=${param.isSpikeInfo.id}&seckill=${seckill}`
				})
			},
			getOptional() {
				this.$post({
					url: '/portal/Shop',
					module: 'Goods',
					interface: 9001,
					data: {
						lastId: 0,
						page: 1,
					}
				}).then((res) => {
					// console.log("可选", res);
					let arr = res.list;
					arr.forEach((item) => {
						if (item.isSpike == 1) {
							let time = this.getHMS(item.isSpikeInfo.overTime);
							item.time_h = Number(time.h);
							item.time_m = Number(time.m);
							item.time_s = Number(time.s);
						}
					})
					this.optional = this.arr1to2(arr, 2)
					// console.log(this.optional, "this.optional")

				})
			},
			// js 一维数组 转 我二维数组
			arr1to2(arr, number) {
				var arr2 = [];
				let len = arr.length;
				for (let i = 0, j = 0; i < len; i += number, j++) {
					arr2[j] = arr.splice(0, number);
				}
				return arr2;
			},
			onImg(img) {
				uni.previewImage({
					urls: [img]
				})
			},
			open() {
				this.$refs.popup.open();
			},
			stepperChange(changeNum) {
				// console.log(changeNum)
				this.amountObj = changeNum;
			},
			stepperRes() {
				// console.log("步进器改变后做数据处理")
			},
			onSkuItem(param, param2) {
				// // console.log(param, param2);
				this.skuList.forEach((item, index) => {
					if (item.id == param.id) {
						item.status = true;
						// console.log(item.title);
						item.itemList.forEach((item2) => {
							item2.status = false;
							if (item2.id == param2.id) {
								// console.log(item2.title);
								item2.status = true;
								this.sku[index] = item2.id;
								this.$forceUpdate();
							}
						});
					}
				});
				// console.log(this.sku, "this.sku")
				if (this.sku.length == this.skuList.length) {
					this.getSkuId();

				}
			},
			getSkuId() {
				let id = this.sku.join("_");
				// console.log("选择的规格id拼接", id);
				this.info.goods.optionList.forEach((item3) => {
					if (id == item3.specs) {
						this.sku_id = item3.specs;
						// console.log(this.sku_id, "this.sku_id")
						this.skuId = item3.id;
						this.thumb = item3.thumbUrl ? item3.thumbUrl : this.info.thumbUrl;
						this.price = item3.marketprice;
						this.productprice = item3.productprice;
						this.skuText = item3.title;
					}
				})
			},
			//  是否选择规格
			onSkuStatus(type) {
				//type:1 加入购物车  type:2 立即购买
				if (this.skuList.length > 0 && this.hasoption) {
					for (let i = 0; i < this.skuList.length; i++) {
						this.isChecked = false;
						for (let j = 0; j < this.skuList[i].itemList.length; j++) {
							if (this.skuList[i].itemList[j].status) {
								this.isChecked = true;
								break;
							}
						}
						if (!this.isChecked) {
							// uni.showToast({
							// 	title: "请选择" + this.skuList[i].title,
							// icon: "none"
							// duration: 1500,
							// });
							uni.showToast({
								title: "请选择规格",
								icon: "none",
								duration: 1500,
							});
							break;
						}
					}
				} else {
					this.isChecked = true;
				}

				if (this.isChecked) {
					if (type == 1) {
						// console.log(1);
						this.addCart()
					} else {
						if (this.nowStatus == 1) {
							// console.log(this.sku_id, "this.sku_id1111")
							let data = {
								info: this.info,
								num: this.amountObj,
								skuId: this.skuId,
								sku_id: this.sku_id,
								skuText: this.skuText,
							}
							uni.setStorageSync('goodsInfo', JSON.stringify(data))
							uni.navigateTo({
								url: '/home/submitOrder2?seckill=seckill'
							})
						} else if (this.nowStatus == 0) {
							uni.showToast({
								icon: "none",
								title: "当前秒杀未开始",
								duration: 1500
							})
						} else {
							uni.showToast({
								icon: "none",
								title: "当前秒杀已结束",
								duration: 1500
							})
						}

					}
				}
			},
			// 毫秒级时间戳转换时分秒
			getHMS(timestamp) {
				let date = timestamp * 1000;
				let now = new Date().getTime();
				let times = date - now;
				let seconds = Math.floor(times / 1000);
				let minutes = Math.floor(seconds / 60);
				let hours = Math.floor(minutes / 60);
				minutes %= 60;
				seconds %= 60;
				let h = hours;
				let m = minutes.toString().padStart(2, '0');
				let s = seconds.toString().padStart(2, '0');
				return {
					h,
					m,
					s
				}
			},
			getInfo() {
				let that = this
				that.$post({
					url: '/portal/Spike',
					module: 'Spike',
					interface: 1001,
					data: {
						id: that.id,
						lat: "0",
						lng: "0"
					}
				}).then((infos) => {
					that.info = infos;
					that.price = infos.goods.marketprice;
					that.productprice = infos.goods.productprice;
					that.thumb = infos.thumbUrl;
					that.hasoption = infos.goods.hasoption;
					if (infos.beginStatus == 0) {
						that.hour = Number(that.getHMS(infos.startTime).h);
						that.minute = Number(that.getHMS(infos.startTime).m);
						that.second = Number(that.getHMS(infos.startTime).s);
					} else {
						that.hour = Number(that.getHMS(infos.overTime).h);
						that.minute = Number(that.getHMS(infos.overTime).m);
						that.second = Number(that.getHMS(infos.overTime).s);
					}
					
					that.startTime = that.getDateFun(infos.start_timestamp * 1000).split(" ")[1];
					that.start_timestamp = infos.start_timestamp;
					that.endTime = that.getDateFun(infos.overTime * 1000).split(" ")[1];
					that.end_timestamp = infos.overTime;
					that.inter = setInterval(() => {
						that.getNowStatus();
					}, 1000)

					// console.log(infos.spuId)
					if (!infos.spuId) {
						infos.goods.specList.forEach((item, index) => {
							item.status = false;
							item.id = index;
							item.itemList.forEach((item2, index2) => {
								item2.status = false;
							})
						})
					} else {
						infos.goods.specList = []
						infos.goods.optionList.forEach(item => {
							item.id = item.specs
						})
						let data = {
							title: '',
							itemList: infos.goods.optionList
						}
						infos.goods.specList.push(data)
						// console.log(infos)

					}
					that.$nextTick(() => {
						that.skuList = infos.goods.specList;
						this.getEval();
					})
				})
			},
			getNowStatus() {
				this.now_timestamp = parseInt(new Date().getTime() / 1000);
				if (this.now_timestamp < this.info.start_timestamp) { // 未开始
					this.nowStatus = 0;
				} else if (this.now_timestamp >= this.info.start_timestamp && this.now_timestamp <= this.info
					.overTime) { // 进行中
					this.nowStatus = 1;
				} else {
					this.nowStatus = 2;
				}
				// console.log("nowStatus：", this.nowStatus)
			},
			// 毫秒级时间戳转为 2022-1-18 10:09:06
			getDateFun(n) {
				let now = new Date(n),
					y = now.getFullYear(),
					m = now.getMonth() + 1,
					d = now.getDate();
				let date = y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString()
					.substr(0, 8);
				// console.log("date", date);
				return date;
			},
			addCart() {
				if (this.seckill == "seckill") {
					uni.showToast({
						icon: "none",
						title: "秒杀商品不可加入购物车",
						duration: 1500
					})
					return;
				}
				this.$post({
					url: '/portal/Shop',
					module: 'Cart',
					interface: 1000,
					data: {
						goodsId: this.info.id,
						num: this.amountObj,
						specs: this.sku_id ? this.sku_id : "0_0"
					}
				}).then(res => {
					uni.showToast({
						title: '购物车添加成功',
						icon: "none",
						duration: 1500,
					})
					setTimeout(() => {
						this.getCartList();
					}, 1000)
				})
			},
			getCartList() {
				this.$post({
					url: '/portal/Shop',
					module: 'Cart',
					interface: 1005,
					data: {
						lastId: 0,
						page: 1
					}
				}).then(res => {
					this.total = res.total
				})
			},
			toCart() {
				uni.switchTab({
					url: '/pages/cart/index'
				})
			},
			goEvaluate() {
				uni.navigateTo({
					url: '/home/evaluate?id=' + this.info.id,
				})
			},
			getUser() {
				this.$post({
					module: 'User',
					interface: 1000,
				}).then(res => {
					this.user = res;
				})
			},
			shouCnag() {
				// console.log(this.seckill, this.info.goods.id, this.info.id, "收藏")
				this.$post({
					url: '/portal/Shop',
					module: 'Goods',
					interface: 2003,
					data: {
						goods_id: this.info.goods.id,
					}
				}).then(res => {
					uni.showToast({
						title: '收藏成功',
						duration: 1500,
						icon: 'none',
					});
					setTimeout(() => {
						this.getInfo();
					}, 1000)
				})
			},
			yiShouCnag() {
				this.$post({
					url: '/portal/Shop',
					module: 'Goods',
					interface: 2003,
					data: {
						goods_id: this.info.goods.id,
					}
				}).then(res => {
					uni.showToast({
						title: '取消收藏成功',
						duration: 1500,
						icon: 'none',
					});
					setTimeout(() => {
						this.getInfo();
					}, 1000)

				})
			},
			getEval() {
				this.$post({
					url: "/portal/Shop",
					module: 'Comment',
					interface: 1002,
					data: {
						goodsId: this.info.id,
						status: 0,
						lastId: 0,
						page: 1,
					},
				}).then(res => {
					// console.log(res, "评价列表");
					this.eval = res.list.slice(0, 2);
					this.evalTotal = res.total;
				})
			},

			goBack() {
				const pages = getCurrentPages()
				if (pages.length === 1) {
					if (typeof params === 'number') {
						history.go(-params)
					} else {
						history.back()
					}
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.pageBox {
		width: 100%;
		min-height: calc(100vh - var(--window-top) - 120rpx);
		background-color: #ffffff;
		position: relative;
		line-height: 1.2;
	}

	.swiperBox2 {
		width: 100%;
		position: relative;

		.dotsBoxScroll {
			width: 750rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 1;

			.dotsBox {
				width: 100%;
				height: 118rpx;
				background-color: rgba(206, 207, 210, 0.5014);

				.dotsImg {
					width: 100rpx;
					height: 100rpx;
					border-radius: 16rpx;
					margin: 0 23rpx;

				}
			}
		}

		.swiper2 {
			width: 100%;
			height: 598rpx;

			.swiper2Img {
				width: 100%;
				height: 598rpx;
			}

			/deep/.uni-swiper-dot {
				width: 6rpx;
				height: 6rpx;
				border-radius: 50%;
			}
		}
	}

	.topHead {
		padding: 0 36rpx 0 32rpx;
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 3;

		.detailsBack {
			width: 56rpx;
			height: 56rpx;
		}
	}

	.priceBox {
		height: 108rpx;
		position: relative;
	
		.priceBoxBg {
			width: 100%;
			height: 108rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
	
		.price {
			width: 100%;
			height: 108rpx;
			position: relative;
			z-index: 2;
	
			.priceLeft {
				width: 536rpx;
				padding: 6rpx 0 6rpx 30rpx;
	
				.priceLeft-L {
					flex-direction: column;
	
					.priceLeft-L-T {
						font-size: 28rpx;
						font-family: PingFang SC-Semibold, PingFang SC;
						font-weight: 600;
						color: #FFFFFF;
					}
					
					.priceLeft-L-T2 {
						font-size: 36rpx;
						font-family: PingFang SC-Semibold, PingFang SC;
						font-weight: 600;
						color: #FFFFFF;
					}
				}
	
				.priceLeft-R {
					flex-direction: column;
					margin-left: 48rpx;
	
					.priceLeft-R-sign {
						font-size: 20rpx;
						font-family: PingFang SC-Semibold, PingFang SC;
						font-weight: normal;
						color: #FFFFFF;
						background: rgba(255, 114, 39, 0.5);
						border-radius: 34rpx 34rpx 34rpx 34rpx;
						padding: 2rpx 20rpx;
					}
	
					.priceLeft-p-price2 {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: normal;
						color: #DDE0E4;
						position: relative;
	
						.priceLeft-p-line {
							width: 100%;
							height: 2rpx;
							background-color: #DDE0E4;
							position: absolute;
							left: 0;
							top: 50%;
							transform: translate(0, -50%);
						}
					}
				}
	
	
			}
	
			.priceRight {
				width: 214rpx;
				flex-direction: column;
				justify-content: center;
	
				.priceRight-title {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: normal;
					color: #FD6C4F;
					margin-bottom: 4rpx;
				}
	
				/deep/.uni-countdown__number {
					font-size: 24rpx !important;
					color: #ffffff !important;
					width: 42rpx;
					height: 42rpx;
					background: linear-gradient(180deg, #FD6D5C 0%, #F9B183 100%);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
	
				}
	
				/deep/.uni-countdown__splitor span {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: normal;
					color: #FC6C4E;
				}
			}
		}
	}

	.infoBox {
		padding: 22rpx 30rpx 24rpx;

		.infoTitle {
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #3C393E;
		}

		.signScroll {
			width: 690rpx;
			margin-top: 10rpx;
		}

		.sign {
			margin-top: 8rpx;

			.signItem {
				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				margin-right: 20rpx;
				padding: 4rpx 6rpx;

				.bean {
					width: 30rpx;
					height: 30rpx;
				}

			}

			.signItemOrigin {
				color: #EEAC80;

				background: #FFE1D5;
				border-radius: 4rpx 4rpx 4rpx 4rpx;

				white-space: nowrap;
			}

			.signItemBlue {
				color: #48BAD1;

				background: #EAF4F6;
				border-radius: 4rpx 4rpx 4rpx 4rpx;

				white-space: nowrap;
			}

			.signItemWhite {
				color: #ffffff;

				background: #EC615C;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				white-space: nowrap;


			}
		}

		.infoBom {
			margin-top: 16rpx;

			.infoBomItem {
				.infoBomItemImg {
					width: 25rpx;
					height: 25rpx;
				}

				.infoBomItemText {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #B3B9C0;
					margin-left: 4rpx;
				}
			}
		}

		.infoTips {
			margin-top: 14rpx;
			align-items: flex-end;

			.infoTipsImg {
				width: 120rpx;
				height: 40rpx;
			}

			.infoTipsText {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #CFCDCF;
				margin-left: 18rpx;
			}
		}
	}

	.line {
		width: 750rpx;
		height: 16rpx;
		background: #F8F6FA;
	}

	.choose {
		margin-top: 24rpx;
		padding-left: 32rpx;

		.chooseLine {
			width: 8rpx;
			height: 36rpx;
			background: #EC615C;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
		}

		.chooseText {
			margin-left: 22rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}
	}

	.goodsSwiperBox {
		padding: 0 30rpx;

		/deep/.uni-swiper-dots-horizontal {
			bottom: 0;
		}

		.goodsSwiper {
			margin-top: 16rpx;
			height: 330rpx;

		}

		.swiper-item {
			.chooseItem {
				margin-bottom: 26rpx;

				.chooseThumb {
					width: 130rpx;
					height: 130rpx;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
				}

				.chooseInfo {
					width: 342rpx;
					padding: 0 30rpx;

					.chooseInfoTitle {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #000000;
					}

					.chooseSignBox {
						width: 300rpx;

						.chooseSign {
							margin-top: 8rpx;

							.chooseSignItem {
								font-size: 16rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: normal;
								color: #F2615F;
								background: #FCEEF3;
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								border: 1px solid #F2615F;
								margin-right: 24rpx;
								white-space: nowrap;
							}
						}
					}

					.choosePrice {
						margin-top: 8rpx;

						.priceLeft {
							font-size: 24rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: normal;
							color: #EC615C;
						}

						.priceRight {
							font-size: 24rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: normal;
							color: #D8D7D9;
							margin-left: 16rpx;
							position: relative;

							.priceRightLine {
								width: 90rpx;
								height: 2rpx;
								background-color: #D8D7D9;
								position: absolute;
								top: 50%;
								left: 0;
								transform: translate(0, -50%);
							}
						}
					}
				}

				.count {
					width: 184rpx;
					height: 68rpx;
					background: linear-gradient(90deg, #F2615F 0%, #FDC13D 100%);
					border-radius: 42rpx;
					flex-direction: column;

					.countText {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}

					/deep/.uni-countdown {
						width: auto !important;
						height: auto !important;
					}

					/deep/.uni-countdown__number {
						width: auto !important;
						height: auto !important;
						line-height: 0 !important;
					}

					/deep/.uni-countdown__number span {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;

					}

					/deep/.uni-countdown__splitor span {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}
				}

				.spikerBuy {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					width: 184rpx;
					height: 68rpx;
					background: linear-gradient(90deg, #F2615F 0%, #FDC13D 100%);
					border-radius: 42rpx 42rpx 42rpx 42rpx;
					padding: 0;
					margin: 0;
					border: none;
				}
			}

			.chooseItem:nth-last-of-type(1) {
				margin-bottom: 0;
			}
		}
	}

	.evaluateBox {
		margin-top: 30rpx;

		.evaluate {
			width: 100%;
			background-color: #ffffff;
			border-radius: 20rpx;
			padding: 25rpx;

			.evaluateTop {
				.evaluateTopLeft {
					.evaluateTopLeftLine {
						width: 6rpx;
						height: 36rpx;
						background: #EC615C;
						border-radius: 4rpx;
					}

					.evaluateTopLeftText {
						margin-left: 15rpx;
						font-size: 30rpx;
						font-family: PingFangSC-Semibold;
						line-height: 40rpx;
						color: #000000;
					}
				}

				.evaluateTopRight {
					.evaluateTopRightText {
						font-size: 26rpx;
						font-family: PingFangSC-Regular;
						line-height: 35rpx;
						color: #EC615C;
					}
				}
			}

			.evaluateList {
				margin-top: 32rpx;

				.evaluateListItem {
					padding: 24rpx;
					border-bottom: 1px solid #E7E7E7;

					.itemTop {
						.avatar {
							width: 63rpx;
							height: 63rpx;
							border-radius: 50%;
						}

						.nicknameBox {
							margin-left: 5rpx;

							.nickname {
								font-size: 28rpx;
								font-family: PingFangSC-Semibold;
								line-height: 37rpx;
								color: #000000;
							}

							.time {
								font-size: 26rpx;
								font-family: PingFangSC-Regular;
								line-height: 35rpx;
								color: #999999;
							}
						}
					}

					.itemBom {
						margin-top: 19rpx;

						.itemBomText {
							font-size: 28rpx;
							font-family: PingFangSC-Regular;
							line-height: 37rpx;
							color: #000000;
						}

						.itemBomImgBox {
							margin-top: 9rpx;

							.itemBomImg {
								width: 112rpx;
								height: 112rpx;
								border-radius: 6rpx;
								margin-right: 10rpx;
							}
						}
					}
				}

				.evaluateListItem:nth-last-of-type(1) {
					border-bottom: 0;
				}
			}
		}
	}

	.detailsTitle {
		width: 100%;
		height: 88rpx;
		padding: 0 32rpx;

		.detailsTitleLine {
			width: 142rpx;
			height: 1px;
			background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(248, 107, 64, 1));
		}

		.detailsTitleLine2 {
			width: 142rpx;
			height: 1px;
			background: linear-gradient(270deg, rgba(255, 255, 255, 1), rgba(248, 107, 64, 1));
		}

		.detailsTitleText {
			margin: 0 40rpx;

			.detailsTitleText2 {
				font-size: 28rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #7A797A;
				margin-left: 34rpx;
			}

			.heartIcon {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.details {
		padding-bottom: 120rpx;

		/deep/img {
			width: 100%;
			height: auto;
		}
	}

	.bom {
		width: 100%;
		height: 120rpx;
		padding: 0 32rpx 0 46rpx;
		background-color: #ffffff;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 98;
		border-top: 2rpx solid #EBEDF0;

		.bomLBox {
			.bomL {
				flex-direction: column;
				position: relative;
				margin-right: 20rpx;

				.cart {
					width: 48rpx;
					height: 48rpx;
				}

				.cartT {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #736464;
					line-height: 40rpx;
				}

				.cartNum {
					font-size: 14rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #ffffff;
					line-height: 18rpx;
					padding: 2rpx 4rpx;
					background: #FE2E1C;
					border-radius: 9rpx;
					position: absolute;
					right: 0;
					top: 0;
					z-index: 1;
				}
			}
		}



		.bomR {
			justify-content: flex-end;



			.add {
				border: none;
				margin-right: 32rpx;
				width: 184rpx;
				height: 64rpx;
				background: #FEA512;
				border-radius: 42rpx 42rpx 42rpx 42rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				white-space: nowrap;
			}

			.buy {
				width: 184rpx;
				height: 64rpx;
				background: #F2615F;
				border-radius: 42rpx 42rpx 42rpx 42rpx;
				border: none;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				white-space: nowrap;

			}
		}
	}

	.popupBox {
		width: 100%;
		padding: 32rpx 32rpx 152rpx;
		background-color: #ffffff;
		border-radius: 16rpx 16rpx 0 0;

		.popupInfoBox {
			.thumb {
				width: 168rpx;
				height: 168rpx;
				border-radius: 16rpx;
			}

			.infoR {
				flex: 1;
				height: 168rpx;
				padding: 10rpx 0 0 10rpx;
				position: relative;

				.title {
					height: 88rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 44rpx;
					overflow: hidden; //超出的文本隐藏
					display: -webkit-box;
					-webkit-line-clamp: 2; // 超出多少行
					-webkit-box-orient: vertical;

				}

				.infoRB {
					width: 100%;
					position: absolute;
					bottom: 0;
					left: 0;
					z-index: 1;
					padding: 0 32rpx 0 10rpx;

					.price {
						font-size: 32rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #000000;
						line-height: 48rpx;
					}

					.stepper {
						.stepperBtn {
							width: 40rpx;
							height: 40rpx;
						}

						.stepperIpt {
							width: 60rpx;
							height: 40rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #000000;
							text-align: center;
						}
					}
				}
			}
		}

		.popupSkuTitle {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #afa9b0;
			line-height: 40rpx;
			margin-top: 60rpx;
		}

		.skuBox {
			margin-top: 30rpx;

			.sku {
				margin-bottom: 30rpx;

				.skuTitle {
					font-size: 26rpx;
					font-weight: 400;
					color: #afa9b0;
					margin-bottom: 10rpx;
				}

				.skuCon {
					flex-wrap: wrap;
					justify-content: flex-start;

					.skuItem {
						padding: 0 16rpx;
						background: #ffffff;
						border-radius: 22rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: #afa9b0;
						border: 2rpx solid #afa9b0;
						margin: 10rpx 10rpx 0;
					}

					.skuActive {
						padding: 0 16rpx;
						border-radius: 22rpx;
						font-size: 20rpx;
						font-weight: 400;
						border: 2rpx solid #afa9b0;
						margin: 10rpx 10rpx 0;
						background: #afa9b0;
						color: #ffffff;
					}
				}
			}

			.sku:nth-last-of-type(1) {
				margin-bottom: 0;
			}
		}

	}
</style>